/* eslint-disable @typescript-eslint/indent */
/* eslint-disable indent */
/* eslint-disable react/jsx-indent */
import React, { Fragment, memo } from 'react';
import { Avatar, Tag } from 'antd';
import Pre from '@/components/Pre';

import styles from './index.less';

const Comment = memo(({ data = {} }) => {
    const { recordUserInfo = {}, reason = '' } = data;
    return <div className={styles.commentItem}>
        <div>
            <Avatar icon="user" src={recordUserInfo?.avatar} size={24} style={{ flex: '0 0 80px' }} />
        </div>
        <div className={styles.commentItemRight}>
            <div className={styles.nameWrap}>
                <span className={styles.name}>{recordUserInfo?.employeeName}</span>
                <Tag color={data.hasAgree ? 'green' : 'red'} style={{ marginLeft: '10px' }}>
                    {data.hasAgree ? '同意' : '拒绝'}
                </Tag>
            </div>
            <div className={styles.cont}>
                <Pre>{reason}</Pre>
            </div>
        </div>
    </div>
});

const TalkSuggest = memo(({ dataSource = {}, ...rest }) => {
    const { interviewRecordInfoVOList = [] } = dataSource;
    return (
        <div {...rest}>
            <div className={styles.questionEvaluate}>
                <div className={styles.evaluate}>面谈建议：</div>
                {interviewRecordInfoVOList.map((item, index) => (
                    // eslint-disable-next-line react/no-array-index-key
                    <Fragment key={index}>
                        <Comment data={item}/>
                    </Fragment>
                ))}
            </div>
        </div>
    );
});

export default TalkSuggest;
